<template>
  <div id="container">
    <!-- 这是支付页面 -->
    <!-- 卡片1 -->
    <el-row>
      <el-col :span="20">
        <el-card class="box-card1">
          <el-row>
            <el-col :span="20">
              <span
                >订单提交成功，请尽快付款！订单号：{{
                  orderInfo.orderNumber
                }}</span
              >
            </el-col>
            <el-col :span="4">
              <span>应付金额：{{ orderInfo.paymentAmount }}元</span>
            </el-col>
          </el-row>
          <!-- 订单详情折叠面板 -->
          <el-row>
            <el-col :span="22">
              <div class="grid-content bg-purple-light">
                <el-collapse>
                  <el-collapse-item name="1">
                    <span class="collapse-title" slot="title">订单详情</span>
                    <div>收货地址：{{ orderInfo.deliveryAddress }}</div>
                    <div>收货人：{{ orderInfo.consignee }}</div>
                    <div>联系电话：{{ orderInfo.telephoneNumber }}</div>
                  </el-collapse-item>
                  <!-- 支付方式 -->
                  <el-col :span="24">
                    <el-card class="box-card2">
                      <span class="paytext">支付方式</span>
                      <div
                        v-for="(pay, index) in this.payList"
                        :key="pay.id"
                        @click="payTypeId(index)"
                      >
                        <hr
                          style="
                            background-color: rgb(214, 214, 214);
                            height: 1px;
                            border: none;
                          "
                        />
                        <el-row>
                          <el-col :span="20">
                            <el-radio-group v-model="radio">
                              <el-radio :label="pay.paymentType"
                                ><i
                                  :class="payIcon[index]"
                                  style="color: rgb(8, 139, 4)"
                                ></i
                                >{{ pay.paymentType }}</el-radio
                              >
                            </el-radio-group>
                          </el-col>
                          <el-col :span="4">
                            <span
                              >支付金额： {{ orderInfo.paymentAmount }}元</span
                            >
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </el-col>
                </el-collapse>
              </div></el-col
            >
          </el-row>
          <!-- 支付按钮 -->
          <el-row>
            <el-col :span="10" :md="16">&nbsp;</el-col>
            <el-col :span="6" :md="4">
              <el-button
                class="zf"
                type="primary"
                icon="el-icon-s-finance"
                @click="open"
                round
                >立即支付</el-button
              ></el-col
            >
            <el-col :span="8" :md="4">&nbsp;</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>



<script>
export default {
  data () {
    return {
      // 支付方式的列表数据
      payList: [],
      // 支付方式图标
      payIcon: ['iconfont icon-weixinzhifu', 'iconfont icon-zhifubao', 'iconfont icon-yinhangqia', 'iconfont icon-icon-test'],
      // 商品id
      goodsId: '',
      // 支付方式双向数据绑定
      radio: '微信支付',
      // 购物车id
      shoppingId: 0,
      // 订单数据
      orderInfo: {},
      // 支付类型id
      PaymentId: 1
    }
  },
  // 钩子
  created () {
    // 从url中获取购物车id
    this.shoppingId = this.$route.query.id
    // 获取支付列表
    this.getPayList()
    // 获取根据购物车id获取订单信息
    this.getOrderInfo(this.shoppingId)
  },
  methods: {
    // 支付类型id
    payTypeId (index) {
      this.PaymentId = index + 1
    },
    // 根据购物车id获取订单信息
    async getOrderInfo (shoppingId) {
      console.log(shoppingId);
      const { data: res } = await this.$http.get(`CommodityOrders/id/${shoppingId}`)
      if (res.meta.status !== 200) {
        // 获取订单失败
        this.$message.error('获取订单失败！')
      } else {
        // 获取订单成功
        // 订单信息赋值
        this.orderInfo = res.data.commodityOrders
        this.$message.success('获取订单成功！')
      }
    },
    // 输入密码的对话框
    open () {
      this.$prompt("请输入密码", "支付验证", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async () => {
        // 将支付方式保存到session中传给支付成功页面
        window.sessionStorage.setItem('payName', this.radio)
        // 将未支付状态改为已支付
        const { data: res } = await this.$http.put('commodityOrders/' + this.orderInfo.id, {
          // 支付类型id
          PaymentId: this.PaymentId,
          // 结算状态
          SettlementStatus: true
        })
        if (res.meta.status !== 200) {
          // 订单状态更新失败
          this.$message.error('订单状态更新失败！')
        } else {
          // 订单状态更新成功！
          this.$message.success('订单状态更新成功！')
        }
        this.$router.push('/success?id=' + res.data.id)
      }).catch(() => {
        this.$message.info('已取消付款！')
      })
    },
    // 获取支付列表
    async getPayList () {
      const { data: res } = await this.$http.get('Payments')
      if (res.meta.status !== 200) {
        // 获取支付列表失败
        this.$message.error('获取支付列表失败！')
      } else {
        // 获取支付列表成功
        // 数据赋值
        this.payList = res.data.payments
      }
    }
  }
}
</script>



<style lang="css" scoped>
.cancelPay {
  text-decoration: none;
  color: black;
}
.cancelPay:hover {
  color: rgb(94, 170, 241);
}

/* 单选框样式 */
.el-radio {
  margin-left: 2rem;
  transform: scale(1.4);
}
/* 卡片1样式 */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card1 {
  border-radius: 30px;
}
#container {
  margin-left: 14%;
  margin-top: 5%;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
/* 卡片2样式 */
.box-card2 {
  background-color: rgb(245, 250, 255);
  width: 110%;
  height: 20rem;
  padding-top: 3vh;
  border-radius: 20px;
}
.paytext {
  margin-left: 1rem;
  font-size: 30px;
  color: rgb(233, 108, 108);
  font-weight: bolder;
}
.zf {
  background-color: rgb(255, 241, 163);
  font-size: 30px;
  margin-left: 60%;
}
.iconfont {
  margin-right: 1rem;
}
/* 订单详情样式 */

.collapse-title {
  color: rgb(88, 172, 240);
  order: 1;
}
.el-collapse {
  border: none;
}
</style>
